<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>邮件箱</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>

    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/mail.css">


    <link href="assets/js/footable/css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css">
    <link href="assets/js/footable/css/footable.standalone.css" rel="stylesheet" type="text/css">
    <link href="assets/js/footable/css/footable-demos.css" rel="stylesheet" type="text/css">



    <link rel="stylesheet" href="assets/js/dataTable/lib/jquery.dataTables/css/DT_bootstrap.css">
    <link rel="stylesheet" href="assets/js/dataTable/css/datatables.responsive.css">


    <link rel="stylesheet" href="assets/js/button/ladda/ladda.min.css">
    <style type="text/css">
           .pagination {
            min-width: 300px;
            max-width: 650px;
            height: 45px;
            line-height: 45px;
            margin: 20px auto;
        }
        .pagination ul {
            list-style: none;
        }
        .pagination ul li {
            float:left;
            margin-left: 8px;
        }
        .pagination ul li a {
            display: block;
            width:30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            text-decoration: none;
            background: #5fa5f8;
            color: #fff;
            border-radius: 2px;
        }
        .pagination ul li a.next {
            width: 120px;
        }
        .pagination ul li a:hover {
            background: #66c7ff;
        }
        .pagination ul li a.curr {
            background: #55d7ff;
        }
    .button-demo, .progress-demo {
        display: inline-block;
    }
    .time{
        float: right;
    }
    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/minus.png">
</head>

<body>
    <i class="addDt">+</i>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!-- TOP NAVBAR -->
    <nav role="navigation" class="navbar navbar-static-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button">
                    <span class="entypo-menu"></span>
                </button>
                <button class="navbar-toggle toggle-menu-mobile toggle-left" type="button">
                    <span class="entypo-list-add"></span>
                </button>




                <div id="logo-mobile" class="visible-xs">
                   <h1>WEB管理<span>v1.2</span></h1>
                </div>

            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">

                    <li class="dropdown">

                            <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i style="font-size:20px;" class="icon-conversation"></i><div class="noft-red"><?php echo $count['number'];?></div></a>



                        <ul style="margin: 11px 0 0 9px;" role="menu" class="dropdown-menu dropdown-wrap">
                          <?php if ($count['number']==0): ?>
                             <li> 
                               <h4 style="margin-left: 65px;">没有未读邮件</h4>
                            </li>
                        <?php else: ?>
                        <?php foreach ($count['userInfo'] as $key => $value) { ?>
                            <li> 
                                <a href="<?php echo url('deal_mail',['id'=>$value['id'],'deal_choose'=>1]) ?>">
                                    <img alt="" class="img-msg img-circle" src="http://api.randomuser.me/portraits/thumb/men/1.jpg"><?php echo $value['name']?> <b><?php echo set_time($value['create_at']);?></b>
                                </a>
                            </li>
                          <?php  };?>
                          <?php endif ?>
                            <li class="divider"></li>
                            <li>
                                <div>See All Messege</div>
                            </li>
                        </ul>
                    </li>
                
                    <li><a href="<?php echo url('lock') ?>"><i data-toggle="tooltip" data-placement="bottom" title="Lock" style="font-size:20px;" class="icon-help tooltitle"></i></a>
                    </li>

                </ul>
                <div id="nt-title-container" class="navbar-left running-text visible-lg">
                    <ul class="date-top">
                        <li class="entypo-calendar" style="margin-right:5px"></li>
                        <li id="Date"></li>


                    </ul>

                    <ul id="digital-clock" class="digital">
                        <li class="entypo-clock" style="margin-right:5px"></li>
                        <li class="hour"></li>
                        <li>:</li>
                        <li class="min"></li>
                        <li>:</li>
                        <li class="sec"></li>
                        <li class="meridiem"></li>
                    </ul>
                    <ul id="nt-title">
                        <li>
                            欢迎来到facebow
                        </li>
                        <li>
                            今天天气不错啊
                        </li>
                    </ul>
                </div>

                <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" class="admin-pic img-circle" src="<?php echo $data['pic'] ;?>">Hi,<?php echo $user;?> <b class="caret"></b>
                        </a>
                        <ul style="margin-top:14px;" role="menu" class="dropdown-setting dropdown-menu">
                            <li>
                                <a href="<?php echo url('profile');?>">
                                    <span class="entypo-user"></span>&#160;&#160;我的主页</a>
                            </li>
                            <li>
                                <a href="<?php echo url('edit');?>">
                                    <span class="entypo-vcard"></span>&#160;&#160;修改资料</a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="entypo-lifebuoy"></span>&#160;&#160;Help</a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="<?php echo url('out_login');?>">
                                    <span class="entypo-basket"></span>&#160;&#160; 退出登录</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="icon-gear"></span>&#160;&#160;背景</a>
                        <ul role="menu" class="dropdown-setting dropdown-menu">

                            <li class="theme-bg">
                                <div id="button-bg"></div>
                                <div id="button-bg2"></div>
                                <div id="button-bg3"></div>
                                <div id="button-bg5"></div>
                                <div id="button-bg6"></div>
                                <div id="button-bg7"></div>
                                <div id="button-bg8"></div>
                                <div id="button-bg9"></div>
                                <div id="button-bg10"></div>
                                <div id="button-bg11"></div>
                                <div id="button-bg12"></div>
                                <div id="button-bg13"></div>
                            </li>
                        </ul>
                    </li>
                    <li class="hidden-xs">
                        <a class="toggle-left" href="#">
                            <span style="font-size:20px;" class="entypo-list-add"></span>
                        </a>
                    </li>
                </ul>

            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- /END OF TOP NAVBAR -->

    <!-- SIDE MENU -->
    <div id="skin-select">
        <div id="logo">
         <h1>FaceBow<span>v1.0</span></h1>
        </div>

        <a id="toggle">
            <span class="entypo-menu"></span>
        </a>
        <div class="dark">
            <form action="#">
                <span>
                    <input type="text" name="search" value="" class="search rounded id_search" placeholder="搜索..." autofocus="">
                </span>
            </form>
        </div>

        <div class="search-hover">
            <form id="demo-2">
                <input type="search" placeholder="搜索..." class="id_search">
            </form>
        </div>




        <div class="skin-part">
            <div id="tree-wrap">
                <div class="side-bar">
                    <ul class="topnav menu-left-nest">
                        <li>
                            <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                                <span class="">facebow</span>
                                <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                            </a>
                        </li>

                        <li>
                            <a class="tooltip-tip ajax-load" href="#" title="动态">
                                <i class="entypo-facebook"></i>
                                <span>动态圈</span>

                            </a>
                            <ul>
                                <li>
                                    <a class="tooltip-tip2 ajax-load" href="<?php echo url('index') ?>" title="新鲜动态"><i class="entypo-facebook-squared"></i><span>新鲜动态</span></a>
                                </li>
                                <li>
                                    <a class="tooltip-tip2 ajax-load" href="<?php echo url('index') ?>" title="我的动态"><i class="entypo-facebook-circled"></i><span>我的动态</span></a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a class="tooltip-tip ajax-load" href="<?php echo url('addFriends') ?>" title="有趣的人">
                                <i class="icon-user"></i>
                                <span>有趣的人</span>

                            </a>
                        </li>
                        <li>
                            <a class="tooltip-tip ajax-load" href="<?php echo url('album') ?>" title="相册">
                                <i class="fontawesome-picture"></i>
                                <span>我的相册</span>

                            </a>
                        </li>



                        <li>
                            <a class="tooltip-tip ajax-load" href="#" title="信箱">
                                <i class="icon icon-mail"></i>
                                <span>我的信箱</span>

                            </a>
                            <ul>
                                <li>
                                    <a class="tooltip-tip2 ajax-load" href="<?php echo url('mail') ?>" title="收件箱"><i class="entypo-mail"></i><span>收件箱</span></a>
                                </li>
                                <li>
                                    <a class="tooltip-tip2 ajax-load" href="<?php echo url('mail',['pn'=>1,'choose'=>3])?>" title="垃圾箱"><i class="entypo-trash"></i><span>垃圾箱</span></a>
                                </li>
                            </ul>
                        </li>

                        <!-- <li>
                            <a class="tooltip-tip ajax-load" href="media.html" title="Media">
                                <i class="entypo-clock"></i>
                                <span>我的FB生涯</span>

                            </a>
                        </li> -->
                    </ul>

                    

                    


                    <div class="side-dash">
                        <h3>
                            <span>访问者</span>
                        </h3>
                        <div id="g1" style="height:180px" class="gauge"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END OF SIDE MENU -->


<div aria-labelledby="myLargeModalLabel" role="dialog" tabindex="-1" class="modal fade bs-example-modal-lg" style="display: none;" id="myModal">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">

                                    <div class="modal-header">
                                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                                            <span class="entypo-cancel"></span>
                                        </button>
                                        <h6 id="myLargeModalLabel" class="modal-title">发邮件</h6>
                                    </div>
                                    <div class="modal-body">

                                        <div class="compose_mail">

                                            <form role="form" action="<?php echo url('send_mail')?>" method="post" >
                                                <div class="form-group">

                                                    <input type="email" placeholder="收信人" id="exampleInputEmail1" class="form-control" name="Addressee" >
                                                </div>
                                                <div class="form-group">

                                                    <input type="text" placeholder="主题" id="exampleInputPassword1" class="form-control" name="title">
                                                </div>

                                                

                                                <textarea style="height:200px!important;margin:20px 0" class="form-control" rows="8" name="content"></textarea>


                                                <button class="btn" type="submit">Send</button>
                                                <button class="btn" type="submit">
                                                    <span class="fontawesome-save">&nbsp;&nbsp;保存草稿</span>
                                                </button>
                                            </form>


                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>

    <!--  PAPER WRAP -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">





            <!-- CONTENT -->
            <!--TITLE -->
            <div class="row">
                <div id="paper-top">
                    <div class="col-sm-3">
                        <h2 class="tittle-content-header">
                            <i class="icon-mail"></i> 
                            <span>Mail
                            </span>
                        </h2>

                    </div>

                    <div class="col-sm-7">
                        <div class="devider-vertical visible-lg"></div>
                        <div class="tittle-middle-header">

                            <div class="alert">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                <span class="tittle-alert entypo-info-circled"></span>
                                   welcome back,&nbsp;
                                   <strong><a href="<?php echo url('index')?>"><?php echo $user;?></a></strong>&nbsp;&nbsp;Your last sig in at  <?php echo set_time($data['last_login']) ;?> 
                            </div>


                        </div>

                    </div>
                    <div class="col-sm-2">
                        <div class="devider-vertical visible-lg"></div>
                        <div class="btn-group btn-wigdet pull-right visible-lg">
                            <div class="btn">
                                Widget</div>
                            <button data-toggle="dropdown" class="btn dropdown-toggle" type="button">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul role="menu" class="dropdown-menu">
                                <li>
                                    <a href="#">
                                        <span class="entypo-plus-circled margin-iconic"></span>Add New</a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="entypo-heart margin-iconic"></span>Favorite</a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="entypo-cog margin-iconic"></span>Setting</a>
                                </li>
                            </ul>
                        </div>


                    </div>
                </div>
            </div>
            <!--/ TITLE -->

            <!-- BREADCRUMB -->
            <ul id="breadcrumb">
                <li>
                    <span class="entypo-home"></span>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">Home</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="<?php echo url('mail_e')?>" title="Sample page 1">邮箱主页 </a>
                </li>
                 <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">收信箱</a>
                </li>
                <li class="pull-right">
                    <div class="input-group input-widget">

                        <input style="border-radius:15px" type="text" placeholder="Search..." class="form-control">
                    </div>
                </li>
            </ul>

            <!-- END OF BREADCRUMB -->

            <!-- 所有信息 -->
            <div class="content-wrap">
                <div class="row">
                    <div class="col-sm-12">
                    <div class="col-sm-2" style="margin-top: 20px;">
                        <div class="btn btn-info button-mail col-sm-2" data-toggle="modal" data-target="#myModal"><i class="entypo-pencil"></i>&nbsp;&nbsp;发邮件</div>
                    </div>
                    <div class="row" style="margin:20px 0 10px 0;">
                        <div class="col-sm-2">
                            <!-- /btn-group -->
                                <div class="btn-group">
                                    <button data-toggle="dropdown" class="btn btn-success dropdown-toggle" type="button">全部信件
                                        <span class="caret"></span>
                                    </button>
                                    <ul role="menu" class="dropdown-menu">
                                        <li><a href="<?php echo url('mail',['pn'=>1,'choose'=>0])?>">未读邮件</a>
                                        </li>
                                        <li><a href="<?php echo url('mail',['pn'=>1,'choose'=>1])?>">已读邮件</a>
                                        </li>
                                        <li><a href="<?php echo url('mail',['pn'=>1,'choose'=>2])?>">已回复邮件</a>
                                        </li>
                                        <li><a href="<?php echo url('mail',['pn'=>1,'choose'=>3])?>">回收站</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li><a href="<?php echo url('mail')?>">全部信件</a>
                                        </li>
                                    </ul>
                                </div>
                                <!-- /btn-group -->
                        </div>                            
                    </div>

                            <div class="body-nest" id="Footable">                           
                                <table class="table-striped footable-res footable metro-blue" data-page-size="20">
                                    <thead>
                                        <tr>        
                                            <th style="width: 80px;height: 60px;">
                                                <section class="button-demo">

                                    <button class="ladda-button" data-size="xs" data-color="green" data-style="zoom-in">全选</button>
                                </section>
                                            </th>                               
                                            <th>
                                                发信人
                                            </th>
                                            <th>
                                                信件信息
                                            </th>                                        
                                            <th>
                                                状态
                                            </th>
                                            <th>
                                                操作
                                            </th>
                                        </tr>
                                    </thead>
                                    
                                    <tbody>

                                    <?php foreach($emails as $key =>$email){;?>
                                        <?php if ($email['status']==3): ?> 
                                            <tr>
                                            <td><input type="checkbox" name="" id=""></td>
                                            <td><?php echo $email['send_email'];?></td>
                                            
                                            <td><?php echo $email['title'];?><span  class="time"><?php echo $email['create_at'];?></span></td>
                                            <td data-value="1">
                                             <span class="status-metro status-disabled" title="已删除">已删除</span>      
                                            </td>
                                            <td>
                                <a href="<?php echo url('deal_mail',['id'=>$email['id'],'deal_choose'=>3])?>">恢复</a>
                                <a href="<?php echo url('deal_mail',['id'=>$email['id'],'deal_choose'=>1])?>">详情</a>
                                <a href="<?php echo url('deal_mail',['id'=>$email['id'],'deal_choose'=>4])?>">彻底删除</a>
                                            </td> 
                                             </tr>
                                        
                                        <?php else : ?> 
                                        <tr>
                                            <td><input type="checkbox" name="" id=""></td>
                                            <td><?php echo $email['send_email'];?></td>
                                            
                                            <td><?php echo $email['title'];?><span  class="time"><?php echo $email['create_at'];?></span></td>

                                            <?php if ($email['status']==0): ?>  
                                                <td data-value="1">
                                                <span class="status-metro status-disabled" title="未读">未读</span>
                                                <?php endif ;?>

                                            <?php if ($email['status']==1): ?>  
                                                <td data-value="1">
                                                <span class="status-metro status-active" title="已读">已读</span>
                                                <?php endif ;?>
                                
                                            <?php if ($email['status']==2): ?>  
                                                <td data-value="1">
                                                <span class="status-metro status-suspended" title="已回复">已回复</span>
                                                <?php endif ;?>
                                            </td>
                                            <td>
                                <a href="<?php echo url('mail_recover',['email_id'=>$email['id']])?>" > 回信 </a></button>
                                <a href="<?php echo url('deal_mail',['id'=>$email['id'],'deal_choose'=>1])?>">详情</a>
                                <a href="<?php echo url('deal_mail',['id'=>$email['id'],'deal_choose'=>2])?>">删除</a>
                                            </td>
                                            </tr>
                                             <?php endif ;?> 
                                    <?php }; ?>
                                        
                                    </tbody>
                        
                                </table>
                                <div class="pagination" >
      <div class="pagination">
      <ul>
          <li>
              <a href="?pn=<?php 
              if(($pn-1)> 0): 
                     echo $pn-1 ;
              else : 
                echo $pn = 1; 
                endif; ?>&&choose=<?php echo $choose?>" class="next">上一页</a>

          </li>
          <?php for($i = 1; $i <= $pageCount; $i++): ?>
          <li>
              <?php if($i == $pn): ?>
              <a class="curr" href="?pn=<?php echo $i ?>&choose=<?php echo $choose?>">
              <?php else: ?>
              <a href="?pn=<?php echo $i ?>&choose=<?php echo $choose?>">
              <?php endif; ?>
              <?php echo $i ?></a>
          </li>
          <?php endfor; ?>
          <li>
              <a href="?pn=<?php 
                if ($pn + 1 < $pageCount):
                 echo $pn + 1  ;
                 else :
                  echo $pn = $pageCount;
                endif; ?>&choose=<?php echo $choose?>" class="next">下一页</a>
          </li>
      </ul>
  </div>
  </div>
                            </div>

                        </div>


                    </div>

                </div>
            </div>
            <!-- 所有信息结束 -->



            <!-- FOOTER -->
            <div class="footer-space"></div>
            <div id="footer">
                <div class="devider-footer-left"></div>
                <div class="time">
                    <p id="spanDate">
                    <p id="clock">
                </div>
                <div class="copyright">Make with Love
                    <span class="entypo-heart"></span>Collect from <a href="http://www.cssmoban.com/" title="FACEBOW" target="_blank">FACEBOW</a> All Rights Reserved</div>
                <div class="devider-footer"></div>
            </div>
            <!-- / END OF FOOTER -->

        </div>
    </div>
    <!--  END OF PAPER WRAP -->

 <!-- RIGHT SLIDER CONTENT -->

    <div class="sb-slidebar sb-right">
        <div class="right-wrapper">
            <div class="row">
                <h3>
                    <span><i class="entypo-chat"></i>&nbsp;&nbsp;CHAT</span>
                </h3>
                <div class="col-sm-12">
                    <span class="label label-warning label-chat">Online</span>
                     <?php foreach($fData as $v){
                             if($v['is_online'] == 1) :?>
                    <ul class="chat">
                        <li>
                             <a href="<?php echo url('profile',['uid'=>$v['id']])?>">
                                <span>
                                    <img alt="" class="img-chat img-circle" src="<?php echo $v['pic']?>">
                                </span><b><?php echo $v['username']?></b>
                            </a>
                        </li>
                   
                    </ul>
                        <?php endif;?>
                        <?php } ?>
                        <br></br>
                        <br></br>
                    <span class="label label-chat">Offline</span>
                            <?php foreach($fData as $v){
                        if($v['is_online'] == 0) :?>
                    <ul class="chat">
                    
                        <li>
                          <a href="<?php echo url('profile',['uid'=>$v['id']])?>">
                                <span>
                                    <img class="img-chat img-circle" src="<?php echo $v['pic']?>">
                                </span><b><?php echo $v['username']?></b>
                                <br><i>Last seen : <?php echo substr($v['last_login'],strpos($v['last_login'],' '),10);?></i>
                            </a>
                        </li>
                    </ul>
                    <?php endif;?>
                        <?php } ?>
                </div>
            </div>
        </div>
    </div>

    <!-- END OF RIGHT SLIDER CONTENT-->

    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>


    <!-- GAGE -->
    <script type="text/javascript" src="assets/js/toggle_close.js"></script>
    <script src="assets/js/footable/js/footable.js?v=2-0-1" type="text/javascript"></script>
    <!-- <script src="assets/js/footable/js/footable.sort.js?v=2-0-1" type="text/javascript"></script> -->
    <script src="assets/js/footable/js/footable.filter.js?v=2-0-1" type="text/javascript"></script>
    <script src="assets/js/footable/js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>
<script src="assets/js/button/ladda/spin.min.js"></script>
    <script src="assets/js/button/ladda/ladda.min.js"></script>
    <script type='text/javascript' src='assets/js/button/progressbutton.jquery.js'></script>
    <script>
    jQuery(document).ready(function($) {
        var interval;
        var bar = jQuery('.main').progressbutton();
        jQuery('#reset').click(function() {
            clearInterval(interval);
            if (bar) {
                bar.progressbutton('reset');
            }
        });
        jQuery('.color').click(function() {
            //clearInterval(interval);
            var clicked = jQuery(this);
            bar.progressbutton({
                color: clicked.data('color')
            });
        });
        jQuery('.opacity').click(function() {
            //clearInterval(interval);
            var clicked = jQuery(this);
            bar.progressbutton({
                opacity: clicked.data('opacity')
            });
        });

        jQuery('.test').click(function() {
            var itm = jQuery(this);
            if (itm.hasClass('disable')) {
                itm.attr('disabled', 'disabled');
            }
            var bar = itm.progressbutton({
                percent: -1
            });
            var clock = 0;

            var interval = setInterval(function() {
                bar.progressbutton({
                    percent: clock
                });
                clock = clock + 0.5;
                if (clock > 100) {
                    itm.removeAttr('disabled');
                    clearInterval(interval);
                    bar.progressbutton('reset');
                }
            }, 30);
        });
        jQuery('.action').click(function() {
            clearInterval(interval);
            var clicked = jQuery(this);
            bar.progressbutton({
                percent: clicked.data('percent')
            });
        });
        jQuery('.other').click(function() {
            var itm = jQuery('#standard');
            var bar = itm.progressbutton({
                percent: -1
            });
            var clock = 0;

            var interval = setInterval(function() {
                bar.progressbutton({
                    percent: clock
                });
                clock = clock + 0.5;
                if (clock > 100) {
                    clearInterval(interval);
                    bar.progressbutton('reset');
                }
            }, 30);
        });


    });
    </script>

    <script>
    // Bind normal buttons
    Ladda.bind('.button-demo button', {
        timeout: 2000
    });

    // Bind progress buttons and simulate loading progress
    Ladda.bind('.progress-demo button', {
        callback: function(instance) {
            var progress = 0;
            var interval = setInterval(function() {
                progress = Math.min(progress + Math.random() * 0.1, 1);
                instance.setProgress(progress);

                if (progress === 1) {
                    instance.stop();
                    clearInterval(interval);
                }
            }, 200);
        }
    });

    // You can control loading explicitly using the JavaScript API
    // as outlined below:

    // var l = Ladda.create( document.querySelector( 'button' ) );
    // l.start();
    // l.stop();
    // l.toggle();
    // l.isLoading();
    // l.setProgress( 0-1 );
    </script>

    <script type="text/javascript">
    $(function() {
        $('.footable-res').footable();
    });
    </script>
    <script type="text/javascript">
    $(function() {
        $('#footable-res2').footable().bind('footable_filtering', function(e) {
            var selected = $('.filter-status').find(':selected').text();
            if (selected && selected.length > 0) {
                e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
                e.clear = !e.filter;
            }
        });

        $('.clear-filter').click(function(e) {
            e.preventDefault();
            $('.filter-status').val('');
            $('table.demo').trigger('footable_clear_filter');
        });

        $('.filter-status').change(function(e) {
            e.preventDefault();
            $('table.demo').trigger('footable_filter', {
                filter: $('#filter').val()
            });
        });

        $('.filter-api').click(function(e) {
            e.preventDefault();

            //get the footable filter object
            var footableFilter = $('table').data('footable-filter');

            alert('about to filter table by "tech"');
            //filter by 'tech'
            footableFilter.filter('tech');

            //clear the filter
            if (confirm('clear filter now?')) {
                footableFilter.clearFilter();
            }
        });
    });
    </script>
</body>

</html>
